<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="btn_wrapper">
          <span style="font-size:12px;color:pink">说明：目前支持学科和关键字条件筛选</span>
          <el-button size="small" type="success" @click="$router.push({path:'new/1?add'})">
            <i class="el-icon-edit"></i>
            新增试题
          </el-button>
        </div>

        <el-form :label-position="labelPosition" label-width="80px" :model="formData">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="学科">
                  <el-select @change="catalogueSimple()" v-model="formData.subjectID" placeholder="请选择">
                    <el-option v-for="item in subject" :key="item.value"
                :label="item.label"
                :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="二级目录">
                  <el-select v-model="formData.catalogID" placeholder="请选择">
                    <el-option v-for="item in Directory" :key="item.id" :label="item.directoryName" :value="item.id"> </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="标签">
                  <el-select v-model="formData.tags" placeholder="请选择">
                    <el-option v-for="item in label" :key='item.id' :label="item.tagName" :value="item.id"> </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="关键字">
                  <el-input v-model="formData.keyword"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="试题类型">
                  <el-select v-model="formData.questionType" placeholder="请选择">
                    <el-option v-for="item in queType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="难度">
                  <el-select v-model="formData.difficulty" placeholder="请选择">
                    <el-option v-for="item in diff" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="方向">
                  <el-select v-model="formData.direction" placeholder="请选择">
                    <el-option v-for="item in fangxiang" :key="item" :label="item" :value="item"> </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="录入人">
                  <el-select v-model="formData.creatorID" placeholder="请选择">
                    <el-option v-for="item in simple" :key="item.id" :label="item.username" :value="item.id"> </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="题目备注">
                  <el-input v-model="formData.remarks"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="企业简称">
                  <el-input v-model="formData.shortName"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="城市">
                  <el-row>
                    <el-col :span="12">
                      <div class="grid-content bg-purple">
                        <el-select @change="getCitys" v-model="formData.province" placeholder="请选择">
                          <el-option v-for="item in this.provinces" :key="item" :label="item" :value="item"> </el-option>
                        </el-select>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="grid-content bg-purple">
                        <el-select v-model="formData.city" placeholder="请选择">
                          <el-option v-for="item in this.areas" :key="item" :label="item" :value="item"> </el-option>
                        </el-select>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item style="text-align: right;">
                  <el-button size="small" @click="cleanForm">清除</el-button>
                  <el-button size="small" type="primary" @click="getFormData">搜索</el-button>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <el-tabs v-model="tabState" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="all">
            <question-list @getList="getList" v-if="tabState === 'all'" :tabState="tabState" :listData="listData" :total="total" :simple="simple"></question-list>
          </el-tab-pane>
          <el-tab-pane label="待审核" name="wait">
            <question-list @getList="getList" :listData="listData" :tabState="tabState" :simple="simple" :total="total" v-if="tabState === 'wait'"></question-list>
          </el-tab-pane>
          <el-tab-pane label="已审核" name="pass">
            <question-list @getList="getList" :listData="listData" :tabState="tabState" :simple="simple" :total="total" v-if="tabState === 'pass'"></question-list>
          </el-tab-pane>
          <el-tab-pane label="已拒绝" name="refuse">
            <question-list @getList="getList" :listData="listData" :tabState="tabState" :simple="simple" :total="total" v-if="tabState === 'refuse'"></question-list>
          </el-tab-pane>
          <div class="page">
            <el-pagination :current-page="page" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" background layout="prev, pager, next, sizes, jumper" :total="total">
            </el-pagination>
          </div>
          <!-- <el-pagination :current-page="page" layout="prev, pager, next, sizes, jumper"></el-pagination> -->
        </el-tabs>

      </el-card>
    </div>
  </div>
</template>

<script>
import QuestionList from '@/module-hmmm/components/question-list.vue'
import { provinces, citys } from '@/api/hmmm/citys'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { subjectSimpleAPI } from '@/api/hmmm/subjects'
import { catalogueListAPI } from '@/api/hmmm/directorys'
import { labelListAPI } from '@/api/hmmm/tags'
import { basicsChoiceAPI } from '@/api/hmmm/questions'
import { simple } from '@/api/base/users'
export default {
  data() {
    return {
      labelPosition: 'right',
      formData: {
        subjectID: '', // 学科ID
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签
        province: '', // 企业所在省
        city: '', // 企业所在市
        keyword: '', // 关键字
        remarks: '', // 备注
        shortName: '', // 简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 二级目录
      },
      subject: [], // 学科下拉数据
      Directory: [], // 二级目录下拉数据
      label: [], // 标签下拉数据
      simple: [], // 录入人下拉数据
      diff: [], // 难度
      queType: [], // 问题类型
      fangxiang: [], // 方向
      provinces: [], // 城市
      areas: [], // 地区
      listData: [],
      tabState: 'all',
      page: 1,
      pageSize: 5,
      total: 0,
      name: 'all'
    }
  },
  components: {
    QuestionList
  },
  created() {
    this.subjectList()
    this.getSimple()
    this.change()
    this.getprovinces()
    // this.basicsChoice()
    this.getList()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.page = 1
      this.getList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    /**
     *获取精选列表
     */
    async basicsChoice(val) {
      const { data } = await basicsChoiceAPI({
        page: this.page, // 当前页数
        pagesize: this.pageSize, // 当前页数据量
        ...val
      })
      // this.total = data.counts
      // this.listData = data.items
      return data
    },

    getList(val) {
      if (val) {
        if (this.tabState === 'all') {
          this.basicsChoice(val).then(res => {
            this.total = res.counts
            this.listData = res.items
          })
        } else if (this.tabState === 'wait') {
          this.basicsChoice({ chkState: 0, subjectID: val.subjectID, catalogID: val.catalogID }).then(async res => {
            this.listData = res.items
            this.total = res.counts
          })
        } else if (this.tabState === 'pass') {
          this.basicsChoice({ chkState: 1, subjectID: val.subjectID, catalogID: val.catalogID }).then(res => {
            this.listData = res.items
            this.total = res.counts
          })
        } else {
          this.basicsChoice({ chkState: 2, subjectID: val.subjectID, catalogID: val.catalogID }).then(res => {
            this.listData = res.items
            this.total = res.counts
          })
        }
        return
      }
      if (this.tabState === 'all') {
        this.basicsChoice(val).then(res => {
          this.total = res.counts
          this.listData = res.items
        })
      } else if (this.tabState === 'wait') {
        this.basicsChoice({ chkState: 0 }).then(async res => {
          this.listData = res.items
          this.total = res.counts
        })
      } else if (this.tabState === 'pass') {
        this.basicsChoice({ chkState: 1 }).then(res => {
          this.listData = res.items
          this.total = res.counts
        })
      } else {
        this.basicsChoice({ chkState: 2 }).then(res => {
          this.listData = res.items
          this.total = res.counts
        })
      }
    },
    /**
     * 获取表单数据
     */
    getFormData() {
      this.getList(this.formData)
    },
    /**
     * 获取地区
     */
    getCitys() {
      this.areas = citys(this.formData.province)
    },
    /**
     * 获取市
     */
    getprovinces() {
      this.provinces = provinces()
    },
    /**
     *试题类型 难度 方向
     */
    change() {
      this.diff = difficulty
      this.queType = questionType
      this.fangxiang = direction
    },
    /**
     * 获取录入人
     */
    async getSimple() {
      const { data } = await simple()
      this.simple = data
    },
    /**
     * 获取二级标题 标签
     */
    async catalogueSimple() {
      // 获取二级标题

      const { data } = await catalogueListAPI({ subjectID: this.formData.subjectID })
      this.Directory = data.items

      // 获取标签
      const { data: res } = await labelListAPI({ subjectID: this.formData.subjectID })
      this.label = res.items
    },
    /**
     * 获取学科列表
     */
    async subjectList() {
      const {
        data
      } = await subjectSimpleAPI()
      this.subject = data
    },
    cleanForm() {
      this.formData = {
        subjectID: '', // 学科ID
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签
        province: '', // 企业所在省
        city: '', // 企业所在市
        keyword: '', // 关键字
        remarks: '', // 备注
        shortName: '', // 简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 二级目录
      }
    },
    handleClick(tab, event) {
      this.page = 1
      this.tabState = tab.name
    }
  },
  watch: {
    listData: {
      handler(newVal) {
        if (newVal.length === 0) {
          this.page--
          this.getList()
        }
      },
      deep: true
    }
  }

}
</script>

<style lang="scss" scoped>
.btn_wrapper {
  display: flex;
  margin-bottom: 15px;
  justify-content: space-between;
}
</style>
